<template>
	<!-- <keep-alive> -->
	<view class="page-apply-wrapper">
		<custom-nav title="申请企业" themeColor="#333"></custom-nav>
		<view class="apply-header">
			<image class="header-bg" src="../../../static/img/serve/head.png"></image>
			<view class="apply-head_info">
				<view class="flow-item flex-act">
					<view class="flow-step">
						<up-icon name="checkmark-circle-fill" color="#FF7139" size="26"></up-icon>
					</view>
					<text class="r-text1">香港公司基本信息</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step">
						<up-icon name="info-circle" color="#999999" size="26"></up-icon>
					</view>
					<text class="r-text2">公司计划拓展升级目标地区/国家</text>
				</view>


			</view>
		</view>
		<view class="apply-content">
			<view class="apply-form-wrapper">
				<view class="apply-form">
					<up-form :model="model1" labelPosition="top" :rules="rules" ref="uFormRef">
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">企业基本信息</text>
							</view>
							<up-form-item labelPosition="top" label="公司名称:" required prop="reg_name" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.reg_name" border="none" placeholder="请输入"></up-input>

							</up-form-item>
							<up-form-item labelPosition="top" label="公司性质:" required prop="reg_type_name"
								ref="companynature" labelWidth="auto" @click="()=>{
								showcompanyApplySelect=true
							}">
								<up-input readonly v-model="model1.reg_type_name" border="none"
									placeholder="请选择"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item labelPosition="top" label="公司成立日期:" required prop="reg_create_date"
								ref="buildDate" labelWidth="auto" @click="()=>{
								showdatetime=true
							}">
								<up-input readonly v-model="model1.reg_create_date" border="none"
									placeholder="请选择"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item labelPosition="top" required label="公司有无实体办公室(可否提供租约):" prop="is_have_office"
								ref="item1" labelWidth="auto">
								<up-radio-group placement="row" v-model="model1.is_have_office">
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
										label="是">
									</up-radio>
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="0"
										label="否">
									</up-radio>
								</up-radio-group>
							</up-form-item>
							<up-form-item labelPosition="top" required label="公司聘请员工人数:" prop="staff_num" ref="item1"
								labelWidth="auto">
								<up-input v-model="model1.staff_num" border="none" placeholder="请输入"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item labelPosition="top" required label="是否为职员购买MPF:" prop="is_have_mpf"
								ref="item1" labelWidth="auto">
								<up-radio-group placement="row" v-model="model1.is_have_mpf">
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
										label="是">
									</up-radio>
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="0"
										label="否">
									</up-radio>
								</up-radio-group>

							</up-form-item>
							<up-form-item labelPosition="top" required label="公司上年度营业额:" prop="last_year_turnover"
								ref="item1" labelWidth="auto">
								<up-input v-model="model1.last_year_turnover" border="none"
									placeholder="请输入"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item labelPosition="top" required label="可否提供最新计划报告:" prop="is_have_new_plan"
								ref="item1" labelWidth="auto">
								<up-radio-group placement="row" v-model="model1.is_have_new_plan">
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
										label="是">
									</up-radio>
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="0"
										label="否">
									</up-radio>
								</up-radio-group>
							</up-form-item>
						</view>

						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">公司业务介绍</text>
							</view>
							<up-form-item label="所属行业:" prop="industry_name" ref="item1" labelWidth="auto" @click="()=>{
								show1=true
							}">
								<up-input readonly v-model="model1.industry_name" border="none"
									placeholder="请输入"></up-input>
								<template #right>
									<up-icon name="arrow-right"></up-icon>
								</template>
							</up-form-item>
							<up-form-item label="产品来源及销售地区/国家:" prop="goods_from_country" ref="item1" labelWidth="auto">
								<up-input v-model="model1.goods_from_country" border="none"
									placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item label="产品名称:" prop="goods_name" ref="item1" labelWidth="auto">
								<up-input v-model="model1.goods_name" border="none" placeholder="请输入"></up-input>
							</up-form-item>
							<up-form-item label="销售方式:" prop="sale_type" ref="item1" labelWidth="auto">
								<up-input v-model="model1.sale_type" border="none" placeholder="请输入"></up-input>
							</up-form-item>
						</view>
						<view class="apply-form-section">
							<view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">公司股权结构</text>
							</view>
							<up-form-item labelPosition="left" label="香港公司:" prop="applyInfo.structure"
								ref="structure" labelWidth="auto">
								<template #right>
									<up-icon name="plus-circle" size="20"  @click="go('addCompany')"></up-icon>
								</template>
							</up-form-item>
							<view class="row-list" v-if="structureList">
								<view class="row" @click.stop="go(`addCompany?form=${JSON.stringify(item)}`)" v-for="(item,index) in structureList" :key="index">
									{{item.company_name}} | {{item.rate}}
								</view>
							</view>
							<up-form-item labelPosition="left" label="目标地区/国家公司:" prop="applyInfo.address"
								ref="address" labelWidth="auto">
								<template #right>
									<up-icon name="plus-circle" size="20"  @click="go('addArea')"></up-icon>
								</template>
							</up-form-item>
							<view class="row-list" v-if="addressList">
								<view class="row" @click.stop="go(`addArea?form=${JSON.stringify(item)}`)" v-for="(item,index) in addressList" :key="index">
									{{item.targetCompany}} | {{item.rate}}
								</view>
							</view>
						</view>
					</up-form>
				</view>
			</view>

		</view>
		<view class="apply-btn-wrapper">
			<view class="apply-btn" @click="handleNext">
				<text>下一步</text>
			</view>

		</view>
		<up-picker :show="showcompanyApplySelect" :columns="companyList" keyName="name"
			@cancel="()=>showcompanyApplySelect=false" @confirm="handleConfirm"></up-picker>
		<up-datetime-picker  :minDate="752480000"
            :maxDate="17867785550000" :show="showdatetime" v-model="value1" mode="date" format="YYYY-MM-DD"
			@confirm="handleConfirmTime" @cancel="()=>showdatetime=false"></up-datetime-picker>
		<up-picker :show="showIndustry" :columns="IndustryList" @cancel="()=>showIndustry=false"
			@confirm="handleConfirmIndustry"></up-picker>
		<up-picker :show="show1" :columns="IndustryList" keyName="name" @cancel="()=>show1=false"
			@confirm="handleConfirm1"></up-picker>
		<up-picker :show="showSource" :columns="SourceList" @cancel="()=>showSource=false"
			@confirm="handleConfirmSource"></up-picker>
		<up-picker :show="showSale" :columns="SaleList" @cancel="()=>showSale=false"
			@confirm="handleConfirmSale"></up-picker>
	</view>
	<!-- </keep-alive> -->
</template>

<script setup>
	import customNav from '../../../components/custom-nav.vue'
	import {
		ref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	const id = ref("")
	const structureList = ref([])
	const addressList = ref([])
	const eductaionList = ref([])
	const uFormRef = ref(null);
	onLoad((e) => {
		uni.$on('structure', (e) => {
			if (e.index !== undefined) {
				if(e.del==1){
					structureList.value.splice(e.index ,1)
				}else{
					structureList.value[e.index] = e
				}
			} else {
				structureList.value.push({
					...e,
					index: structureList.value.length
				})
			}
		})
		uni.$on('address', (e) => {
			if (e.index !== undefined) {
				if(e.del==1){
					addressList.value.splice(e.index ,1)
					console.log('addressList.value: ', addressList.value)
				}else{
					addressList.value[e.index] = e
				}
			} else {
				addressList.value.push({
					...e,
					index: addressList.value.length
				})
			}
		})
		if(e&&e.id){
			id.value = e.id
			getDetails()
		}
	})
	// 获取项目详情
	function getDetails() {
		proxy.$request({
			url: 'api/User/getMyApplyDetail',
			header:"application/x-www-form-urlencoded",
			data: {order_id:id.value}
		}).then(res => {
			model1.value = res.data
			model1.value.is_have_office = res.data.is_have_office+''
			model1.value.is_have_mpf = res.data.is_have_mpf+''
			model1.value.is_have_new_plan = res.data.is_have_new_plan+''
			if(res.data.ownership_company_json){
				structureList.value = res.data.ownership_company_json
			}
			if(res.data.ownership_target_json){
				addressList.value = res.data.ownership_target_json
			}
		})
	}
	onUnload(()=>{
		uni.$off('structure',()=>{})
		uni.$off('address',()=>{})
	})
	const rules = {
		'reg_name': [{
			required: true,
			message: '请输入公司名称',
			trigger: ['blur', 'change'],
		}],
		'reg_type_name': [{
			required: true,
			message: '请选择公司性质',
			trigger: ['blur', 'change'],
		}],
		'reg_create_date': [{
			required: true,
			message: '请选择公司成立日期',
			trigger: ['blur', 'change'],
		}],
		'is_have_office': [{
			required: true,
			message: '请选择公司有无实体办公室',
			trigger: ['blur', 'change'],
		}],
		'staff_num': [{
			required: true,
			message: '请输入公司聘请员工人数',
			trigger: ['blur', 'change'],
		}],
		'is_have_mpf': [{
			required: true,
			message: '请选择是否为职员购买MPF',
			trigger: ['blur', 'change'],
		}],
		'last_year_turnover': [{
			required: true,
			message: '请输入公司上年度营业额',
			trigger: ['blur', 'change'],
		},{
			type:'number',
			message: '请输入数字',
			trigger: ['blur', 'change'],
		}],
		'is_have_new_plan': [{
			required: true,
			message: '请选择可否提供最新计划报告',
			trigger: ['blur', 'change'],
		}],
	}
	const showcompanyApplySelect = ref(false)
	const show1 = ref(false)
	const showdatetime = ref(false)
	const showIndustry = ref(false)
	const showSource = ref(false)
	const showSale = ref(false)
	const value1 = ref(Date.now())
	const model1 = ref({
		reg_name: ''
	})
	const SaleList = ref([
		[
			'销售方式1',
			'销售方式2',
			'销售方式3',
		]
	])
	const IndustryList = ref([])
	const SourceList = ref([
		[
			'来源1',
			'来源2',
			'来源3'
		]
	])
	const companyList = ref([])

	function handleNext() {
		if(id.value){
			return	uni.navigateTo({
				url: `/pages/serve/companyApply/applyTwo?form1=${JSON.stringify(model1.value)}&id=${id.value}`
			})
		}
		// if(structureList.value.length==0){
		// 	return uni.$u.toast('请选择公司股权结构')
		// }
		model1.value.ownership_company_json=JSON.stringify(structureList.value)
		// if(addressList.value.length==0){
		// 	return uni.$u.toast('目标地区/国家公司')
		// }
		model1.value.ownership_target_json=JSON.stringify(addressList.value)
		uFormRef.value.validate().then(valid => {
			if (valid) {
				uni.navigateTo({
					url: `/pages/serve/companyApply/applyTwo?form1=${JSON.stringify(model1.value)}&id=${id.value}`
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}

	function handleConfirm(e) {
		model1.value.reg_type_id = e.value[0].id
		model1.value.reg_type_name = e.value[0].name
		showcompanyApplySelect.value = false
		uFormRef.value.validateField('reg_type_name');
	}

	function handleConfirmIndustry(e) {
		model1.value.applyInfo.industry = e.value[0]
		showIndustry.value = false
	}

	function handleConfirm1(e) {
		model1.value.industry_id = e.value[0].id
		model1.value.industry_name = e.value[0].name
		show1.value = false
	}

	function handleConfirmSource(e) {
		model1.value.applyInfo.source = e.value[0]
		showSource.value = false
	}

	function handleConfirmSale(e) {
		model1.value.applyInfo.sale = e.value[0]
		showSale.value = false
	}

	function handleConfirmTime(e) {
		showdatetime.value = false
		model1.value.reg_create_date = proxy.$u.timeFormat (e.value,'yyyy-mm-dd')
		uFormRef.value.validateField('reg_create_date');
	}

	function getDict() {
		// 获取公司性质列表
		proxy.$request({
			url: '/api/Service/getRegTypeLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				companyList.value = [res.data]
			}
		})
		// 获取行业列表
		proxy.$request({
			url: 'api/Service/getIndustryLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				IndustryList.value = [res.data]
			}
		})
	}
	getDict()
</script>
<style lang="scss" scoped>
	.page-apply-wrapper {
		background: #f8f8ff;

		.apply-header {
			position: relative;

			.header-bg {
				width: 100%;
				height: 482rpx;
			}

			.apply-head_info {
				position: absolute;
				display: flex;
				top: 200rpx;
				justify-content: center;
				width: 100%;
				align-items: center;

				.flow-line {
					height: 1rpx;
					width: 300rpx;
					// background: #fff;
					border-top: 4rpx dashed #FF7139;
				}

				.flex-act {
					text {
						color: #333 !important;
					}
				}

				.flow-item {

					// position: relative;
					.r-text1{
						margin-left: -90rpx;
					}
					.r-text2{
						margin-left: -180rpx;
					}


					.flow-step {
						// background: #FFFFFF;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}

					text {
						position: absolute;
						margin-left: -30rpx;
						margin-top: 10rpx;
						font-size: 25rpx;
						color: #666;
					}
				}
			}
		}

		.apply-form-section {
			background: #fff;
			margin-top: 20rpx;
			// border-bottom: 20rpx solid #f8f8f8;
			padding: 32rpx;
		}
		.row{
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 76rpx;
		}
		.apply-content {
			position: relative;
			top: -130rpx;
			background: #f8f8ff;

			.apply-form {
				padding-bottom: 60rpx;
				background: #f8f8f8;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;

			.apply-btn {
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
				width: 686rpx;
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}


	}
	.edu-list{
		margin-top: 20rpx;
		.edu{
			.edu-row1{
				height: 92rpx;
				.edu{
					font-size: 32rpx;
					color: #000000;
					line-height: 38rpx;
					text-align: left;
				}
				.time{
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
				}
			}
			.edu-row2{
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}
	}
</style>